<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card shadow="hover" class="statistics-card">
          <div class="card-content">
            <div class="icon" :style="{ background: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="info">
              <div class="value">{{ item.value }}</div>
              <div class="label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { User, Goods, ShoppingCart, Money } from '@element-plus/icons-vue'

const statistics = ref([
  { label: '用户总数', value: '1,234', icon: 'User', color: '#409EFF' },
  { label: '商品总数', value: '456', icon: 'Goods', color: '#67C23A' },
  { label: '订单总数', value: '789', icon: 'ShoppingCart', color: '#E6A23C' },
  { label: '总收入', value: '￥123,456', icon: 'Money', color: '#F56C6C' }
])
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.icon :deep(.el-icon) {
  font-size: 24px;
  color: #fff;
}

.info {
  flex: 1;
}

.value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.label {
  font-size: 14px;
  color: #909399;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .el-col {
    width: 100%;
  }
}
</style> 